<template>
	<view class="pay-for-me">
		<view class="content">
			<view class="content-money">
				<view class="content-money-tit">代付金额</view>
				<view class="">
					<text>￥</text>
					<text class="total">{{orderMoney}}</text>
				</view>
			</view>
			<view class="content-ordernum">
				订单号:{{orderNum}}
			</view>
			<view class="content-imgcode">
				<tki-qrcode
					cid="qrcode1"
					ref="qrcode"
					:val="codeUrl"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:icon="icon"
					:iconSize="iconsize"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="true"
					@result="qrR" />
			</view>
			<view class="content-note">使用微信扫一扫帮我付款</view>
			<view class="content-note">
				<text>该二维码</text>
				<text class="color-important">两小时内</text>
				<text>有效</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				orderMoney: '', // 支付金额
				orderNum: '', //支付订单号
				codeUrl: '',// 要生成的二维码值
				size: 380, // 二维码大小
				unit: 'rpx', // 单位
				background: '#fff', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				timer: null, // 定时器
			}
		},
		onLoad(option) {
			
			this.orderMoney = option.orderMoney
			this.codeUrl = decodeURIComponent(option.codeUrl)
			this.orderNum = option.orderNum
			// this.creatQrcode()
			console.log(this.codeUrl)
			this.timer = setInterval(() => {
				this.getOrderDetail(this.orderNum);
			},5000)
		},
		onBackPress(event) {
			uni.switchTab({url: '/pages/index/index'})
			return true;
		},
		destroyed() {
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			/**
			 * 生成二维码
			 */
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			/**
			 * @param {String} res
			 */
			qrR(res) {
				this.src = res
			},
			/**
			 * 获取订单详情
			 * @param {String} orderId
			 */
			async getOrderDetail(orderId) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/detail',
					data: { order_no: orderId },
					loadingStatus: false
				})
				if (res.status === 1) {
					if(res.data.status != 1){
						clearInterval(this.timer);
						this.timer = null;
						this.pageTo('/pages/index/payResult?result=1')
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.pay-for-me{
		padding-top: 30rpx;
		.content{
			margin: 0 30rpx;
			padding-bottom: 90rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-lg2;
			border: 1px solid #dedede;
			.content-money{
				text-align: center;
				color: $uni-text-color-inverse;
				border-radius: $uni-border-radius-lg2 $uni-border-radius-lg2 0 0;
				background-image: linear-gradient(-45deg, #f88f1f 0%, #ffc845 100%), linear-gradient(#f11958, #f11958);
				&-tit{
					padding-top: 30rpx;
				}
				.total{
					font-size: 80rpx;
				}
			}
			.content-ordernum{
				text-align: center;
			}
			.content-imgcode{
				height: 380rpx;
				width: 380rpx;
				margin: 90rpx auto 20rpx;
			}
			.content-note{
				text-align: center;
				font-size: $uni-font-size-sm2;
				color: $uni-text-color-grey2;
			}
		}
	}
</style>
